<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>map</title>
    <script src="/public/js/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="/public/js/Cesium/Widgets/widgets.css" />
    <style>
        .cesium-widget-credits {
            /* 去除logo */
            display: none !important;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <script>
        var linePointArr = [];
        var viewer = new Cesium.Viewer("cesiumContainer", {
            //sceneMode: Cesium.SceneMode.SCENE2D,
            //mapMode2D: Cesium.MapMode2D.ROTATE,
            animation: false, //是否显示动画控件(左下方那个)
            baseLayerPicker: false, //是否显示图层选择控件
            geocoder: true, //是否显示地名查找控件
            timeline: false, //是否显示时间线控件
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: false, //是否显示帮助信息控件
            infoBox: true, //是否显示点击要素之后显示的信息

        });
        var tileset = new Cesium.Cesium3DTileset({
            url: '/public/3dnew/tileset.json'
        });

        //调整tileset的位置     --测试无用
        // var position1 = Cesium.Cartesian3.fromDegrees(114.451389, 30.504722)
        // tileset._modelMatrix = Cesium.Matrix4.fromTranslation(position1); //生效

        tileset.readyPromise.then(function() {
            zoomToTileset() //贴地
                //colorByHeight(); //设置颜色
            viewer.scene.skyBox.show = false; //星云不展示
            // viewer.scene.globe.show = false; //地球不显示
            viewer.scene.backgroundColor = new Cesium.Color(255, 255, 255, 0.1); //背景颜色
            viewer.scene.primitives.add(tileset); //添加
            viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(
                0, -0.5,
                tileset.boundingSphere.radius * 2.0
            ));
        })

        //鼠标左键点击事件
        viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
            var pickedFeature = viewer.scene.pick(movement.position);
            if (!Cesium.defined(pickedFeature)) {
                return;
            }
            //getln(movement, pickedFeature) //获取经纬度
            pointfn(movement) //画点
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        //点击获取经纬度
        function getln(e) {
            var position = viewer.scene.pickPosition(e.position);
            //将笛卡尔坐标转化为经纬度坐标
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height;
            console.log("[Lng=>" + longitude + ",Lat=>" + latitude + "]"); //获取到经纬度
        }
        //画点
        function pointfn(e) {
            //获取点击位置笛卡尔坐标
            var position = viewer.camera.pickEllipsoid(e.position, viewer.scene.globe.ellipsoid);
            //将笛卡尔坐标转化为经纬度坐标
            var cartographic = Cesium.Cartographic.fromCartesian(position);
            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
            var height = cartographic.height;
            if (linePointArr.length == 2) {
                linePointArr = [];
            }
            linePointArr.push(position)
            linefn(e)
            if (height < 0) {
                height = 0;
            }
            viewer.entities.add({
                //position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 1), //世界坐标---点会出现高度问题
                position: viewer.scene.pickPosition(e.position), //点正常显示
                point: { // 点
                    // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, // 指定高度 该点固定在地形上
                    show: true,
                    color: Cesium.Color.SKYBLUE,
                    pixelSize: 3, // 以像素为单位指定大小
                    outlineColor: Cesium.Color.YELLOW, // 制定边框的颜色
                    outlineWidth: 3, // 以像素为单位指定轮廓宽度！
                }
            });
        };
        //画线，并计算两条线之间的距离
        function linefn(e) {
            //根据记录点击的点，按照顺序记录先后的两个点
            //corridor
            if (linePointArr.length != 2) return
            console.log(linePointArr)
            getLineDis(linePointArr[0], linePointArr[1])
            var polyline = viewer.entities.add({
                corridor: {
                    show: true,
                    positions: linePointArr, // 获取或设置指定 Cartesian3 数组的属性定义线条的位置。
                    // 获取或设置指定用于绘制折线的材料的属性。
                    material: new Cesium.PolylineGlowMaterialProperty({
                        glowPower: 0.3, //一个数字属性，指定发光强度，占总线宽的百分比。
                        color: Cesium.Color.RED.withAlpha(.9),
                    }),
                    width: 5,
                    clampToGround: true
                }
            });
        }

        //计算两点之间的距离
        function getLineDis(startPoint, endPoint) {
            //笛卡尔坐标
            var x2 = (endPoint.x - startPoint.x) * (endPoint.x - startPoint.x);
            var y2 = (endPoint.y - startPoint.y) * (endPoint.y - startPoint.y);
            var dis = Math.sqrt(x2 + y2); //单位：米
            console.log(dis.toFixed(2))
            return dis.toFixed(2);
        }

        //根据z值设置颜色
        function colorByHeight() {
            tileset.style = new Cesium.Cesium3DTileStyle({
                color: {
                    conditions: [
                        ["${z} >= 65", "rgba(255, 26, 0,1)"],
                        ["${z} >= 60", "rgba(255, 143, 0,1)"],
                        ["${z} >= 55", "rgba(255, 236, 0,1)"],
                        ["${z} >= 50", "rgba(189, 255, 0,1)"],
                        ["${z} >= 45", "rgba(58, 255, 0,0.6)"],
                        ["${z} >= 40", "rgba(0, 130, 124,1)"],
                        ["${z} >= 35", "rgba(0, 5, 249,1)"],
                        ["${z} >= 30", "rgba(0, 0, 0,1)"],
                        ["${z} >= 25", "rgba(0, 0, 0,1)"],
                        ["${z} >= 20", "rgba(0, 0, 0,1)"],
                        ["true", "rgba(4, 63, 64,1)"],
                    ],
                }
            });
        }
        //贴地
        function zoomToTileset() {
            boundingSphere = tileset.boundingSphere;
            viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, 0, 0));
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            var height = 0;
            var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
            var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        }
    </script>
</body>

</html>